<template>
  <div>
    <div class="form">
      <el-table :data="recordData" border style="width: 100%">
        <el-table-column fixed prop="leaveName" label="请假类型" align="center" width="180"> </el-table-column>
        <el-table-column prop="leave" label="请假日期" align="center"> </el-table-column>
        <el-table-column prop="description" label="请假事由" align="center" width="180"> </el-table-column>
        <el-table-column prop="status" label="审批进度" align="center" width="120">
          <template slot-scope="scope">
            <div v-if="scope.row.status == 0">待审批</div>
            <div v-if="scope.row.status == 1">通过</div>
            <div v-if="scope.row.status == 2">不通过</div>
            <div v-if="scope.row.status == 3">待销假</div>
            <div v-if="scope.row.status == 4">已销假</div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small" style="color: #ec4b24">详情</el-button>
            <el-button
              @click="pass(scope.row)"
              type="text"
              size="small"
              v-show="scope.row.status != 3"
              style="color: #2ac139"
              >通过</el-button
            >
            <el-button
              @click="Fail(scope.row)"
              type="text"
              size="small"
              v-show="scope.row.status != 3"
              style="color: #888888"
              >不通过</el-button
            >
            <el-button
              @click="Approval(scope.row)"
              type="text"
              v-show="scope.row.status == 3"
              size="small"
              style="color: #888888"
              >销假审批</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next" :total="page * 10" @current-change="change"> </el-pagination>
      <el-dialog title="请假详情" :visible.sync="dialogFormVisible"> </el-dialog>
      <el-dialog title="请假详情" :visible.sync="dialogFormVisible">
        <el-form v-model="form">
          <el-form-item label="请假人名称：">
            {{ showform.fullName }}
          </el-form-item>
          <el-form-item label="请假人电话：">
            {{ showform.phone }}
          </el-form-item>
          <el-form-item label="请假类型：">
            {{ showform.leaveName }}
          </el-form-item>
          <el-form-item label="请假日期："> {{ showform.startTime }} 至 {{ showform.endTime }} </el-form-item>
          <el-form-item label="请假事由：">
            {{ showform.description }}
          </el-form-item>
          <el-form-item label="拒绝原因：" v-show="status == 3">
            <el-input
              type="textarea"
              maxlength="50"
              placeholder="请限制字数在50个以内"
              v-model="form.reason"
              show-word-limit
              resize="none"
              :rows="5"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="failmessage" v-show="this.status != 7">确 定</el-button>
          <el-button type="primary" v-show="this.status == 7" @click="adopt">审批通过</el-button>
          <el-button type="primary" v-show="this.status == 7" @click="innerVisible = true">不通过</el-button>
        </div>
        <el-dialog width="30%" title="请输入拒绝理由" :visible.sync="innerVisible" append-to-body>
          <el-form>
            <el-form-item label="拒绝理由：">
              <el-input
                :rows="4"
                maxlength="50"
                type="textarea"
                placeholder="请输入内容"
                show-word-limit
                resize="none"
                style="width: 60%"
                v-model="form.reason"
              ></el-input>
            </el-form-item>
          </el-form>
          <div class="footer" style="width: 100px; height: 40px; margin: 0 auto">
            <el-button type="primary" @click="sublit">提交</el-button>
          </div>
        </el-dialog>
        <!-- <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="">打开内层 Dialog</el-button>
        </div> -->
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Seats from '@/api/Seats'
import api, { type } from '@/api/api'
export default {
  data() {
    return {
      dialogFormVisible: false,
      form: {
        id: '',
        reason: '',
      },
      current: 1,
      limit: 7,
      status: '',
      id: '',
      showform: {},
      page: '',
      recordData: [],
      innerVisible: false,
    }
  },
  created() {
    this.getquery()
  },
  methods: {
    vacationFailed() {
      Seats.vacationFailed(this.id).then(e => {
        if (e.code == 200) {
          this.$message({
            message: e.msg,
            type: 'success',
          })
          this.current = 1
          this.getquery()
          this.page = 1
          this.dialogFormVisible = false
        }
      })
    },
    handleClick(scope) {
      this.status = 0
      this.dialogFormVisible = true
      this.id = scope.id
      this.current = 1
      this.getquery()
      this.getdetails()
      this.page = 1
    },
    sublit() {
      if (this.form.reason == '') {
        this.$message({
          message: '请输入拒绝原因！',
          type: 'error',
        })
      } else {
        Seats.vacationFailed(this.form).then(e => {
          if (e.code == 200) {
            this.$message({
              message: '提交成功！',
              type: 'success',
            })
          }
          this.getquery()
          this.form.id = ''
          this.form.reason = ''
          this.dialogFormVisible = false
          this.innerVisible = false
        })
      }
    },
    getdetails() {
      api.details(this.id).then(res => {
        if (res.code == 200) {
          this.showform = res.data
        }
      })
    },
    adopt() {
      Seats.vacationPassed(this.id).then(e => {
        if (e.code == 200) {
          this.$message({
            message: '审批通过!',
            type: 'success',
          })
          this.getdetails()
          this.dialogFormVisible = false
        }
      })
    },
    Approval(scope) {
      this.status = 7
      this.dialogFormVisible = true
      this.form.id = scope.id
      this.id = scope.id
      this.getdetails()
    },
    pass(scope) {
      this.id = scope.id
      Seats.adopt(this.id).then(e => {
        if (e.code == 200) {
          this.$message({
            message: '已批准!',
            type: 'success',
          })
        }
      })
      this.current = 1
      this.getquery()
      this.page = 1
    },
    Fail(scope) {
      this.form.id = scope.id
      this.id = scope.id
      this.dialogFormVisible = true
      this.getdetails()
      this.status = 3
    },
    getquery() {
      Seats.query(this.current, this.limit).then(res => {
        this.page = res.data.pages
        this.recordData = res.data.queryList
        for (let i = 0; i < this.recordData.length; i++) {
          let leave = 'leave'
          let leavetime = this.recordData[i].startTime + ' 至 ' + this.recordData[i].endTime
          this.recordData[i][leave] = leavetime
        }
      })
    },
    change(val) {
      this.current = val
      this.getquery()
    },
    failmessage() {
      switch (this.status) {
        case 0:
          this.dialogFormVisible = false
          break
        case 3:
          if (this.form.reason == '' || this.form.reason == undefined) {
            this.$message({
              message: '请输入拒绝理由',
              type: 'error',
            })
          } else {
            Seats.Fail(this.form).then(res => {
              if (res.code == 200) {
                this.$message({
                  message: '操作成功！',
                  type: 'success',
                })
                this.getquery()
                this.dialogFormVisible = false
                this.form = {
                  id: '',
                  reason: '',
                }
              }
            })
          }
          break
        default:
          break
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.form {
  width: 80%;
  height: 525px;
  margin-top: 50px;
  padding: 87px;
  border-radius: 15px 15px 15px 15px;
  ::v-deep .el-table {
    border-radius: 15px 15px 15px 15px;
    height: 449px;
    ::v-deep .el-table__body-wrapper {
      font-size: 12px;
    }
  }
  ::v-deep .el-pagination {
    width: 404px;
    margin: 0 auto;
    margin-top: 20px;
  }
  .el-dialog {
    .el-form {
      margin-left: 20px;
    }
    .dialog-footer {
      text-align: center;
    }
  }
}
</style>
